<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04_ES10-flat和flatMap</title>
  <!-- 
  在 JavaScript 的 ES10（ECMAScript 2019）中，新增了两个非常有用的数组方法： `Array.prototype.flat()`  和  `Array.prototype.flatMap()` 。这两个方法主要用于处理嵌套数组，简化数组的操作。
  一、Array.prototype.flat()
   1. 定义
  `flat()`  方法用于将嵌套的数组“展平”，即将多维数组转换为一维数组。可以指定展平的深度。

   2. 语法
  arr.flat(depth);
  - depth：可选参数，表示要展平的层数，默认为 1。如果为  `Infinity` ，则会展平所有层级的数组。

   3. 示例
  const arr = [1, 2, [3, 4], [5, [6, 7]]];

  console.log(arr.flat());          // 输出: [1, 2, 3, 4, 5, [6, 7]]
  console.log(arr.flat(1));         // 输出: [1, 2, 3, 4, 5, [6, 7]]
  console.log(arr.flat(2));         // 输出: [1, 2, 3, 4, 5, 6, 7]
  console.log(arr.flat(Infinity));  // 输出: [1, 2, 3, 4, 5, 6, 7]
  二、Array.prototype.flatMap()
   1. 定义
  `flatMap()`  方法首先对数组中的每个元素应用一个映射函数，然后将结果展平为一维数组。它相当于先调用  `map()`  方法，再调用  `flat()`  方法，且默认展平深度为 1。

   2. 语法
  arr.flatMap(callback(currentValue[, index[, array]])[, thisArg]);
  - callback：用于生成新数组的函数，接收三个参数：
    -  `currentValue` ：当前元素的值。
    -  `index` ：当前元素的索引（可选）。
    -  `array` ：原数组（可选）。
    
  - thisArg：可选参数，执行回调函数时  `this`  的值。

   3. 示例
  const arr = [1, 2, 3];

  const result = arr.flatMap(x => [x, x * 2]);
  console.log(result); // 输出: [1, 2, 2, 4, 3, 6]
  在这个例子中， `flatMap()`  将每个元素映射为一个包含该元素及其两倍的数组，然后将这些数组展平为一维数组。

  三、总结
  - flat()：用于将嵌套数组展平为一维数组，可以指定展平的深度。非常适合处理多维数组。
  - flatMap()：首先对数组中的每个元素应用映射函数，然后将结果展平为一维数组，默认展平深度为 1。它结合了  `map()`  和  `flat()`  的功能，简化了代码。
  -->
</head>
<body>

  <script>
    // flat
    // 将多维数组转化为一维数组
    const arr = [1, 2, [3, 4, [5, 6]]];
    console.log(arr.flat()); // [1, 2, 3, 4, [5, 6]]
    console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6]

    // flatMap
    // 先对数组中的每个元素执行一个函数，然后对结果进行扁平化
    const arr2 = [1, 2, 3, 4];
    console.log(arr2.flatMap(item => [item, item * 2])); // [1, 2, 2, 4, 3, 6, 4, 8]
    console.log(arr2.flatMap(item => [[item, item * 2]])); // [[1, 2], [2, 4], [3, 6], [4, 8]]

    // flatMap 与 map 和 flat 的区别
    // map 和 flat 的区别：map 是先对数组中的每个元素执行一个函数，然后对结果进行扁平化；flat 是将多维数组转化为一维数组
    // flatMap 与 map 和 flat 的区别：flatMap 是先对数组中的每个元素执行一个函数，然后对结果进行扁平化，并且只扁平化一层
    const messages = ['hello world', 'hello js', 'hello es10'];
    // 1.for循环的方式:
    // const newInfos = []
    // for (const item of messages) {
    //   const infos = item.split(" ")
    //   for (const info of infos) {
    //     newInfos.push(info)
    //   }
    // }
    // console.log(newInfos)

    // 2.先进行map, 再进行flat操作
    const newMessages = messages.map(item => item.split(" "))
    const finalMessages = newMessages.flat(1)
    console.log(finalMessages, newMessages)

    // 3.flatMap
    const result = messages.flatMap(item => item.split(' '));
    console.log(result); // ["hello", "world", "hello", "js", "hello", "es10"]

  </script>
  
</body>
</html>